<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/nav.css">
  <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
  <script src='../lib/bootstrap-3.3.5-dist/js/jquery-3.6.0.js'></script>
  <script src='../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js'></script>
  <script src='../javascript/nav.js'></script>
  <script src="../javascript/xsgldata.js"></script>
  <link rel="stylesheet" href="../css/font_sbdceyn3aud/iconfont.css">
  <link rel="stylesheet" href="../css/xsgl.css">
  <script src="../lib/bootstrap-3.3.5-dist/js/bootbox.min.js"></script>
  <title>销书管理</title>
</head>
<style>
</style>
<body>
<!-- 导航 -->
<div id="naviga">
    <div id='logo'>
      <img src="../image/logo.png" alt="">
    </div>
    <ul id="tushu" class="menu">
      <li>图书管理<span class="iconfont icon-xiala"></span></li>
      <li page-data='page1'>还书管理</li>
      <li page-data='page2'>借阅管理</li>
      <li page-data='page3'>新书入库</li>
      <li page-data='page4'>超期还书</li>
      <li page-data='page5' >销书管理</li>
      <li page-data='page6'>图书状态</li>
    </ul>
    <ul id="user" class="menu">
      <li>用户管理<span class="iconfont icon-xiala"></span></li>
      <li page-data='page7'>用户信息</li>
      <li page-data='page8'>黑名单用户</li>
      <li page-data='page9'>借阅记录</li>
      <li page-data='page10'>催还提醒</li>
    </ul>
</div>
<!-- 顶部登录 -->
<div id='top'>
  <div id='shot'>
    <img src="../image/touxiang2.png" alt="">
    <span id="name">

    </span>
    <span class="iconfont icon-xiala"></span>
    <div id='out'>退出</div>
  </div>
</div>
<!--三个模态框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
    </div>
    </div>
</div>
<!-- 主要内容 -->
<div class="x-body clear">
    <div class="title">销书管理</div>
    <div class="xsglbg clear">
        <!-- 新增销书按钮 -->
        <div class="xiaoshu">
            <button type="button" class="btn-primary" data-toggle="modal" data-target="#myModal" id="xinzengxs"
            onclick="xinzengjy()">新增销书</button>
            <button class="layui-btn layui-btn-danger btn-primary" id="pingliangdel" onclick="piliangdel()" data-toggle="modal" data-target="#myModal">批量删除</button>
          <!-- 查询框 -->
          <div class="xiaoshuss"><input type="text" id="entext"  placeholder="请输入关键词"
            ><button id="chaxun">查询</button></div>
        </div>
    </div>
    <!-- 表格 -->
    <table id="mytable" class="table table-striped" >
            <thead>
            <tr>
              <th><input type="checkbox" class="checks" id="biaotou" onclick="swapCheck()"></th>
                <th>图书编号</th>
                <th>图书名称</th>
                <th>作者</th>
                <th>出版社</th>
                <th>类别</th>
                <th>所在书库</th>
                <th>入库日期</th>
                <th>出库日期</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="show_tbody">
            </tbody>
    </table>
    <!-- 分页 -->
    <nav id='yema' aria-label="Page navigation" class="clear">
            <div id='eachPage' class="dropup">
              <!-- 页面跳转 -->
              <input type="text" name="page_num" id="page_num" value="" />
              <span id="cur_page"></span>
              <input type="button" name="jump" id="jump" value="跳转" />
              <button class="btn btn-default dropdown-toggle btn1" type="button" id="dropdownMenu2" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                每页10条
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
                <li class='menuPage' value="10">每页10条</li>
                <li class='menuPage' value="20">每页20条</li>
                <li class='menuPage' value="50">每页50条</li>
              </ul>
            </div>
            <ul class="pagination">
              <li>
                <a href="#" aria-label="Previous" id='prev'>
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <li>
                <a href="#" aria-label="Next" id='next'>
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
            </ul>
    </nav>
</div>
<script>
// 导航菜单高度默认为浏览器高度
let h = $(window).height()
$('#naviga').css({
'height': h + 'px',
})
//图书管理和用户管理点击下拉展示菜单
$('.menu>li:first-child').on('click', function () {
pullDown($(this))
})
//点击菜单跳转至对应页面
$('.menu>li:first-child').siblings().on('click', function () {
jumpPage($(this))
})
//定义样式
$('.table').css({
'margin-bottom': 0
})
$('.dropdown-menu').css({
'min-width': '97px'
})
//复选框全选设置默认值
let checkAll = false
//本地存储page数据，用于页面跳转
let nowPage = sessionStorage.getItem('page')
nowPageOut($(`li[page-data$=${nowPage}]`))
//设置每页展示条数、当前页默认值
let eachNum = 10
let nowPageNum = 1
//初始渲染数据
showData(nowPageNum, eachNum)
//计算最大页数，渲染页码
let maxPage = Math.ceil(xsgldata.length / eachNum)
showPage(maxPage)
pageColor(nowPageNum)
//给上一页下一页绑定事件
$('#prev').on('click', prePage)
$('#next').on('click', nextPage)
//选择每页展示条数绑定事件
$('.menuPage').on('click', function () {
downPage($(this))
})
// 数据渲染表格
function showData(pageNum) {
  $('tbody').html('')
  let showData = xsgldata.slice((pageNum - 1) * eachNum, pageNum * eachNum)
  showData.forEach(item => {
    $('tbody').append(`
        <tr>
          <th><input type="checkbox" class="checks" onclick='ischecks()'></th>
            <td class="id">${item.id}</td>  
            <td class="name">${item.name}</td>  
            <td class="writer">${item.writer}</td>
            <td class="Presse">${item.Presse}</td>  
            <td class="Category">${item.Category}</td>  
            <td class="szsk">${item.szsk}</td>
            <td class="yhdate">${item.yhdate}</td> 
            <td class="sjhsdate">${item.sjhsdate}</td>  
            <td>
            <span  class="btn btn-primary"  data-toggle="modal" data-target="#myModal" onclick="change(this)">编辑</span>
            <span>|</span>
            <span class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="sureDel(this)">删除</span>  
            </td>  
          </tr>
        `)
      })
    }
//页码渲染
function showPage(maxPage) {
$('.page-num').remove()
for (let i = 1; i <= maxPage; i++) {
  $('.pagination').children().last().before(`<li><a href="#" class='page-num'>${i}</a></li>`)
}
$('.page-num').on('click', function () {
  goPage($(this).text())
})
}
//当前页码样式
function pageColor(nowPageNum) {
$('.page-num').css({
  'background-color': 'white',
  'color': 'rgb(214,214,214)'
})
$('.page-num').eq(nowPageNum - 1).css({
  'background-color': 'rgb(64,158,255)',
  'color': 'white'
})
}
//页面跳转
function goPage(goNum) {
nowPageNum = goNum
showData(nowPageNum)
pageColor(nowPageNum)
checkAll = true
swapCheck()
}
//上一页
function prePage() {
if (nowPageNum > 1) {
  nowPageNum--
  goPage(nowPageNum)
}
}
//下一页
function nextPage() {
if (nowPageNum < maxPage) {
  nowPageNum++
  goPage(nowPageNum)
}
}
//每页展示数据条数
function downPage(obj) {
$('#dropdownMenu2').text(obj.text())
eachNum = parseInt(obj.attr('value'))
maxPage = Math.ceil(xsgldata.length / eachNum)
showPage(maxPage)
nowPageNum = 1
goPage(nowPageNum)
}
//复选框全选
function swapCheck() {
if (checkAll) {
  $('input[type="checkbox"]').each(function () {
    this.checked = false
    checkAll = false
  })
} else {
  $('input[type="checkbox"]').each(function () {
    this.checked = true
    checkAll = true
  })
}
ischecks()
}
// 根据登录信息显示用户名称
$('#name').text(sessionStorage.getItem('username'))
//直接进入页面时需校验登录状态
let login = sessionStorage.getItem('loginStatus')
if (login == null) {
  location.href = './login.html'
}
$('#out').on('click', function () {
      location.href = './login.html'
      sessionStorage.clear()
    })

// 查询数据
 $(function () {
    $('#chaxun').click(function () {
        methods.seachName();
    })
})
var methods = {
  seachName: function () {
      var a = $('#show_tbody tr');
      var nameVal = $('#entext').val().trim();
      var nameStr = '',
          nameArr = [];
      if (nameVal==='') {
          bootbox.alert({
              message: "搜索内容不能为空",
              closeButton:false
          })
          return;
      }
      for (var c=0;c<a.length;c++) {
          var txt = $('td:first', a.eq(c)).html().trim();
          nameArr.push(txt);
      }
      a.hide();
      for (var i=0;i<nameArr.length;i++) {
          if (nameArr[i].indexOf(nameVal)>-1) {
              a.eq(i).show();
          }
      }
  },

}
</script>

</body>

</html>